<template>
  <div class="container my-5">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card shadow">
          <div class="card-header text-light" style="background-color: #133068">
            <h3 class="mb-0">作者上传稿件</h3>
          </div>

          <div class="card-body">
            <!-- 状态提示 -->
            <div
              v-if="statusMessage"
              :class="`alert alert-${statusType} alert-dismissible fade show`"
              role="alert"
            >
              {{ statusMessage }}
              <button
                type="button"
                class="btn-close"
                @click="statusMessage = ''"
              ></button>
            </div>

            <!-- 投稿表单 -->
            <form @submit.prevent="handleSubmit">
              <!-- 标题 -->
              <div class="mb-3">
                <label for="title" class="form-label">论文标题</label>
                <input
                  type="text"
                  class="form-control"
                  id="title"
                  v-model="form.name"
                  required
                />
              </div>

              <!-- 作者 -->
              <div class="mb-3">
                <label for="authors" class="form-label">作者</label>
                <input
                  type="text"
                  class="form-control"
                  id="authors"
                  v-model="form.authors"
                  placeholder="多个作者用逗号分隔"
                  required
                />
              </div>

              <!-- 摘要 -->
              <div class="mb-3">
                <label for="abstract" class="form-label">摘要</label>
                <textarea
                  class="form-control"
                  id="abstract"
                  rows="4"
                  v-model="form.abstractWord"
                  required
                ></textarea>
              </div>

              <!-- 关键词 -->
              <div class="mb-3">
                <label for="keywords" class="form-label">关键词</label>
                <input
                  type="text"
                  class="form-control"
                  id="keywords"
                  v-model="form.keyWords"
                  placeholder="多个关键词用分号分隔"
                  required
                />
              </div>
              <!-- 稿件内容 -->
              <div class="mb-3">
                <label for="abstract" class="form-label">内容</label>
                <textarea
                  class="form-control"
                  id="content"
                  rows="7"
                  v-model="form.content"
                  required
                ></textarea>
              </div>
              <el-form-item label="所属期刊">
                <el-select
                    v-model="form.periodicalId"
                    placeholder="所属期刊"
                    clearable
                >
                  <el-option v-for="p in periodicalList" :label="p.name" :value="p.id" :key="p.id"/>
                </el-select>
              </el-form-item>
<!--              <div class="mb-3">-->
<!--                <label for="periodicalId" class="form-label"-->
<!--                  >所属期刊类别id</label-->
<!--                >-->
<!--                <input-->
<!--                  type="text"-->
<!--                  class="form-control"-->
<!--                  id="authors"-->
<!--                  v-model="form.authors"-->
<!--                  placeholder="1：计算机技术  2：环境工程"-->
<!--                  required-->
<!--                />-->
<!--              </div>-->

              <!-- 提交按钮 -->
              <div class="d-grid gap-2">
                <button
                  type="submit"
                  class="btn"
                  style="background-color: #133068; color: white"
                  :disabled="isSubmitting"

                >
                  <span v-if="!isSubmitting" @click="handleSubmit()">提交稿件</span>
                  <span v-else>
                    <span
                      class="spinner-border spinner-border-sm"
                      role="status"
                      aria-hidden="true"
                    ></span>
                    提交中...
                  </span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

import { ref } from "vue";
import {getAllPeriodical,createManuscript} from "@/api/user.js";
const periodicalList = ref([]);
const create=async ()=>{
  try {
    const response = await getAllPeriodical();
    periodicalList.value = response.data;
    console.log(response);
  } catch (error) {
    console.error("Error fetching periodicals:", error);
  }
};
create();
// 表单数据
const form = ref({
  name: "",
  authors: "",
  abstractWord: "",
  keyWords: "",
  content: "",
  periodicalId: "",
});
const clearForm =()=>{
  form.value = {
    name: "",
    authors: "",
    abstractWord: "",
    keyWords: "",
    content: "",
    periodicalId: "",
  }
}

// 状态管理
const isSubmitting = ref(false);
const statusMessage = ref("");
const statusType = ref("success");

// 提交表单
const handleSubmit = async () => {
  let result = await createManuscript(form.value);
  if (result.code === 0) {
    clearForm();
    ElMessage({
      message: '稿件提交成功',
      type: 'success',
    })
  }else {
    ElMessage({
      message: result.message?result.message:'稿件提交失败',
      type: 'error',
    })
  }
};
</script>

<style scoped>
.card {
  border-radius: 15px;
}

.card-header {
  border-radius: 15px 15px 0 0;
}

.form-control:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.alert {
  margin-bottom: 1.5rem;
}
</style>